<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script src="../../js/jquery-3.4.1.min.js"></script>
		<script>
			//点击取消隐藏
			$(function() {
				$(".bbs header span").click(function() {
					$(".post").show();
				});
				$(".post .btn").click(function() {
					var post = $(".post");
					var title=post.find("#title").val();
					var sel=post.find("#section").val();
					var content=post.find(".content").val();
						if (title == "") {
							alert("标题不能为空");
							return;
						} else if ($('#section option:first').prop('selected')) {
							alert("请选择版块");
							return;
						} else if (post.find(".content").val() == "") {
							alert("内容不能为空")
							return;
						} else {
							var src=""
							if(sel=="新课来了"){
								src="images/tou01.jpg";
							}else if(sel=="新手报到"){
								src="images/tou02.jpg";
							}if(sel=="电子书籍"){
								src="images/tou03.jpg";
							}if(sel=="职业规划"){
								src="images/tou04.jpg";
							}
							$("#postList").prepend(`<li><div><img src=${src}></div><h1>${title}</h1><p><span>版块：${sel}</span><span>发帖时间：${new Date().toLocaleString()}</span></p></li>`);
						}
					$(".post").css("display", "none");
				});

			});
		</script>
	</head>
	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg">
						</div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" id="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select id="section">
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布"">
			</div>
		</div>
	</body>
</html>
